<template>
  <section class="page-com">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page" id="page">
      <div class="main" v-loading="loading">
        <!-- <el-button @click="$router.go(-1)" size="small" style="margin-bottom: 10px">返回</el-button> -->
        <p class="top-title">{{ studentInfo.title }}</p>
        <p class="top-test">{{ studentInfo.subtitle }}</p>
        <p class="top-tip">
          {{ studentInfo.abstracts }}
        </p>
        <div
          class="contentRow"
          v-if="studentInfo.context"
          v-html="studentInfo.context.replace(/\n/gm, '<br>')"
        ></div>
        <div class="video" v-if="studentInfo.videoUrl">
          <!-- <img class="video-img" src="@/assets/images/home/banner.png" alt="" />
          <div class="video-btn">
            <img
              class="btn-img"
              src="@/assets/images/student/video-start-btn.png"
              alt=""
            />
          </div> -->
          <vueVideoPlayer :src="studentInfo.videoUrl"></vueVideoPlayer>
        </div>
        <div class="bottom-nav">
          <div
            class="nav-item"
            :class="[pageIndex == 0 ? 'disabled' : '']"
            @click="toPrevious"
          >
            <i class="el-icon-arrow-left"></i>
            <span>上一页</span>
          </div>
          <el-popover placement="bottom" width="200" trigger="hover">
            <ul class="student-selecte">
              <li
                class="student-item"
                v-for="(item, index) in allStudents"
                :key="index"
                @click="checkHandle(index)"
              >
                {{ item.title }}
              </li>
            </ul>
            <div slot="reference">
              <span style="font-size: 18px">所有学生</span>
              <i class="el-icon-arrow-down"></i>
            </div>
          </el-popover>
          <div
            class="nav-item"
            :class="[pageIndex >= total - 1 ? 'disabled' : '']"
            @click="toNext"
          >
            <span>下一页</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
    <FooterMenu />
  </section>
</template>
<script>
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header";
import vueVideoPlayer from "@/components/videoPlayer/videoPlayer.vue";
import { getStudentShowInfo, getStudentShow } from "../../request/api";
export default {
  // 组件名称
  name: "studentStyleDetails",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, vueVideoPlayer, FooterMenu },
  // 组件状态值
  data() {
    return {
      studentInfo: {},
      total: 0,
      pageIndex: 0,
      loading: true,
      studentId: null,
      allStudents: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    pageIndex: function () {
      this.init();
    },
  },
  // 组件方法
  methods: {
    toPrevious() {
      if (this.pageIndex == 0) return;
      this.pageIndex = this.pageIndex - 1;
    },
    toNext() {
      if (this.pageIndex >= this.total - 1) return;
      this.pageIndex = this.pageIndex + 1;
    },
    checkHandle(index) {
      this.pageIndex = index;
    },
    init() {
      // this.loading = true
      getStudentShow({ pageNo: 1, pageSize: 100 })
        .then((res) => {
          if (res.data) {
            this.total = res.data.total;
            this.allStudents = res.data.list;
            getStudentShowInfo({ id: res.data.list[this.pageIndex].id })
              .then((res) => {
                this.loading = false;
                if (res.data) {
                  this.studentInfo = res.data;
                }
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  updated() {
    document.getElementById("page").scrollIntoView(true);
  },
  mounted() {
    this.pageIndex = parseInt(this.$route.query.index);
    this.init();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page-com {
  position: relative;
  width: 100%;
  background: #f5f8fa;
}
.content-page {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 80px 0 0;
  .main {
    background: #fff;
    padding: 50px 30px;
    .top-title {
      font-size: 30px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 42px;
      margin-bottom: 19px;
    }
    .top-test {
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 37px;
      margin-bottom: 25px;
    }
    .top-tip {
      font-size: 14px;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-bottom: 25px;
    }
    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 34px;
      .list-item {
        .item-title {
          font-size: 23px;
          font-weight: 500;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 20px;
        }
        .item-test {
          font-size: 23px;
          font-weight: 400;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 42px;
        }
      }
      .list-img {
        width: 464px;
        height: 298px;
      }
    }
    .video {
      width: 632px;
      height: 365px;
      margin: 30px auto 0;
      position: relative;
      .video-img {
        width: 100%;
        height: 100%;
      }
      .video-btn {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 40%);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-img {
          width: 87px;
          height: 87px;
        }
      }
    }
    .bottom-nav {
      margin-top: 80px;
      display: flex;
      justify-content: space-between;
      color: #2f8efe;
      .el-icon-arrow-left {
        margin-right: 10px;
      }
      .el-icon-arrow-right,
      .el-icon-arrow-down {
        margin-left: 10px;
      }
      .nav-item {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        color: #2f8efe;
        line-height: 33px;
        cursor: pointer;
        &.disabled {
          color: #999;
          cursor: no-drop;
        }
      }
    }
    /deep/ .contentRow {
      position: relative;
      word-break: break-all;
      word-wrap: break-word;
      img {
        max-width: 100%;
      }
    }
  }
}
.student-selecte {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  .student-item {
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .student-item:hover {
    background-color: #f5f7fa;
  }
}
</style>
